<template>
  <a-layout class="layout h-full w-full" :class="[`al-layout-theme-${theme}`]">
    <a-layout-header :style="topBarStyle">
      <div class="h-full w-full flex flex-row justify-between">
        <top-menu />
        <div class="h-full flex flex-row items-center gap-x-4 user-wrapper">
          <nav-to-workbench v-if="layoutConfig.workbenchDisplay" :buttonStyle="buttonStyle" />
          <a-popover placement="bottom" overlayClassName="header-popover" v-if="h5ProductUrl">
            <template #content>
              <vue-qrcode :value="h5ProductUrl" :options="{ width: 120 }" />
              <div class="ql-align-center">扫码后，进入移动端</div>
            </template>
            <div style="cursor: pointer">
              <QrcodeOutlined class="header-qrcode" />
              <span style="margin-left: 5px">移动端入口</span>
            </div>
          </a-popover >
          <!-- 帮助中心 -->
          <a-button
            v-if="layoutConfig.helpCenterDisplay"
            type="text"
            class="top-lay-out-btn"
            :style="buttonStyle"
            @click="jumpHelpDocs"
          >
            帮助中心
          </a-button>
          <user-info />
        </div>
      </div>
    </a-layout-header>
    <a-layout-content :style="{ marginTop: '64px' }">
      <div class="w-full h-full p0" style="overflow: auto">
        <router-view v-slot="{ Component, route }">
          <transition name="fade">
            <component :is="Component" :key="route.fullPath" />
          </transition>
        </router-view>
      </div>
    </a-layout-content>
    <a-layout-footer
      v-if="layoutConfig.footerDisplay"
      style="padding: 0; height: 32px; line-height: 32px; text-align: center"
    >
      {{ layoutConfig.footerSettings }}
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">
  import { computed, CSSProperties } from 'vue'
  import UserInfo from './components/UserInfo.vue'
  import TopMenu from './components/TopMenu.vue'
  import navToWorkbench from './components/navToWorkbench.vue'
  import layoutConfig from '@/layouts/layoutConfig.json'
  // import VueQrcode from '@chenfengyuan/vue-qrcode'
  import { useSystemStore } from '@/store/modules/system'


  const systemStore = useSystemStore()
  const h5ProductUrl = computed(() => systemStore.currentH5ProductUrl)

  const buttonStyle = computed(() => {
    const style = {
      color: 'rgba(0,0,0,0.85)'
    } as CSSProperties
    if (layoutConfig.themeSettings === 'CUSTOM') {
      style.color = layoutConfig.topMenuArea.textStyle.menuStyle.firstLevelMenu.textColor
    } else if (layoutConfig.themeSettings === 'DARK_COLOR') {
      style.color = '#fff'
    } else {
      style.color = 'rgba(0,0,0,0.85)'
    }

    return style
  })
  const topBarStyle = computed(() => {
    const style: CSSProperties = {
      backgroundColor: theme.value === 'dark' ? '#001529' : '#FFF',
      color: theme.value === 'dark' ? '#FFF' : 'rgba(0,0,0,0.85)',
      position: 'fixed',
      zIndex: 1,
      width: '100%',
      minHeight: '40px',
      lineHeight: '40px'
    }
    if (layoutConfig.sizeSettings && layoutConfig.sizeSettings.topHeight) {
      style.height = layoutConfig.sizeSettings.topHeight + 'px'
      if (Number(layoutConfig.sizeSettings.topHeight) > 40) {
        style.lineHeight = style.height
      }
    }
    return style
  })

  const theme = computed(() => {
    if (layoutConfig.themeSettings === 'CUSTOM') {
      return 'custom'
    } else if (layoutConfig.themeSettings === 'DARK_COLOR') {
      return 'dark'
    } else {
      return 'light'
    }
  })

  function jumpHelpDocs() {
    const url = `${location.origin}${layoutConfig.helpCenterSettings}`
    window.open(url)
  }
</script>

<style lang="less">
  .top-lay-out-btn,
  .top-lay-out-btn.@{ant-prefix}-btn-text:hover,
  .top-lay-out-btn.@{ant-prefix}-btn-text:focus {
    color: #fff;
    background: transparent;
  }
  .al-layout-theme-light {
    .top-lay-out-btn,
    .top-lay-out-btn.@{ant-prefix}-btn-text:hover,
    .top-lay-out-btn.@{ant-prefix}-btn-text:focus {
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .user-wrapper {
    justify-content: flex-end;
    &>* {
      height: 100%;
    }
  }
</style>
